"use client";

import { v4 as uuidv4 } from "uuid";
import { addDriver, queryExist } from "../action/driver";

const input_item = [
  {
    label: "备注",
    name: "memo",
    type: "text",
    placeholder: "",
    optional: true,
  },
];
// name 标记 input 的唯一名称；label 是显示在 text 上的名称；

function TextInput({ name, label, type, placeholder }) {
  return (
    <div key={uuidv4()} className="mb-4">
      <label
        className="mb-2 block text-sm font-bold text-gray-700"
        htmlFor="text-box"
      >
        {label}
      </label>

      <label
        className="input input-bordered flex items-center gap-2"
        name={"label_" + name}
      >
        <input
          className="grow"
          name={name}
          type={type}
          placeholder={placeholder}
        />
      </label>
    </div>
  );
}

export default function Add({ refresh }) {
  const handleSubmit = async (formData) => {
    // 检查驱动名称是否填写
    const name = formData.get("name");

    if (!name) {
      // 把 name 为 "name" 的 input className 增加 input-error
      document.getElementsByName("label_name")[0].classList.add("input-error");
      return;
    }

    // 检查是否有同名驱动
    const exist = await queryExist(name);

    if (exist && exist.status === "error") {
      // 找到 alert_name 的 div，显示错误信息
      document.getElementsByName("alert_name")[0].classList.remove("hidden");
      return;
    }

    addDriver(formData);
    resetForm();

    // 刷新 table 页面，获取最新的驱动列表
    await refresh();
  };

  const resetForm = () => {
    document.getElementById("add_modal").close();
    document.getElementById("add_form").reset();

    // 重置 input-error
    document.getElementsByName("label_name")[0].classList.remove("input-error");

    // 隐藏 alert_name
    document.getElementsByName("alert_name")[0].classList.add("hidden");
  };

  return (
    <div className="mx-auto w-full max-w-xl">
      <form
        id="add_form"
        className="card mb-4 rounded bg-white px-8 pb-8 pt-6 shadow-md"
        action={handleSubmit}
      >
        <span className="card-title mb-10 mt-2 gap-2">添加驱动</span>
        <div className="">
          <div key={uuidv4()} className="mb-4">
            <label
              className="mb-2 block text-sm font-bold text-gray-700"
              htmlFor="text-box"
            >
              驱动名称
            </label>

            <label
              className="input input-bordered flex items-center gap-2"
              name="label_name"
            >
              <input
                className="grow"
                name="name"
                type="text"
                placeholder="请输入唯一驱动名称, 例如: 千问或者千问1.5"
                onKeyDown={() => {
                  // hidden input-error
                  document
                    .getElementsByName("label_name")[0]
                    .classList.remove("input-error");
                  // hidden alert_name
                  document
                    .getElementsByName("alert_name")[0]
                    .classList.add("hidden");
                }}
              />
              <p className="badge badge-primary">
                <span className="text-md mr-1 mt-1">*</span>
                <span className="text-sm">必填</span>
              </p>
            </label>
            <div
              role="alert"
              className="alert alert-error hidden"
              name="alert_name"
            >
              <span>存在同名的驱动名称</span>
            </div>
          </div>

          {input_item.map((item) => {
            return (
              <div key={uuidv4()}>
                <TextInput
                  label={item.label}
                  name={item.name}
                  type={item.type}
                  placeholder={item.placeholder}
                  optional={item.optional}
                />
              </div>
            );
          })}
        </div>
        <div className="modal-action">
          <button className="btn btn-wide" type="button" onClick={resetForm}>
            取消
          </button>

          <button className="btn btn-wide btn-neutral" type="submit">
            提交
          </button>
        </div>
      </form>
    </div>
  );
}
